<script setup>
import { Picture as IconPicture } from '@element-plus/icons-vue'

const props = defineProps({
  url: {
    type: String,
    required: true
  }
})
</script>

<template>
  <el-image
    class="h-10 w-10 items-center justify-center rounded border"
    :src="props.url"
    :zoom-rate="1.2"
    :z-index="1000"
    preview-teleported
    hide-on-click-modal
    :preview-src-list="[props.url]"
    :initial-index="4"
    fit="cover"
  >
    <template #error>
      <div class="flex items-center">
        <el-icon><icon-picture /></el-icon>
      </div>
    </template>
  </el-image>
</template>

<style scoped lang="postcss">
.el-image {
  display: flex;
}
.el-image :deep(.el-image__preview) {
  transition: transform 0.25s ease-in-out;
}
.el-image :deep(.el-image__preview):hover {
  transform: scale(1.3);
}
</style>
